<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">
        <el-upload v-model:file-list="fileList" multiple :accept="accept" drag :auto-upload="false" :show-file-list="false">
            <el-button type="primary">选择图片/视频</el-button>
            <div class="el-upload__text">
                可将图片/视频直接拖拽到此处上传
            </div>
        </el-upload>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import api from '@/api';

// 定义组件可以发出的事件
const emit = defineEmits(['file-list', 'closed']);
// mode 用于控制对话框的模式，这里默认为 'file'
const mode = ref('file');
// visible 用于控制对话框的显示和隐藏
const visible = ref(false);
// titleMap 是一个响应式对象，根据不同的 mode 提供对话框的标题
const titleMap = reactive({ file: '选择文件' });
const fileList = ref([]);
const accept = ref('');
// open 方法用于打开对话框
// newMode 参数允许指定对话框的模式，默认为 'file'
const open = (newMode = 'file') => {
    mode.value = newMode;
    visible.value = true;
};
onMounted(async () => {
    const exts = await api.common.file.exts.get();
    console.log(exts);
    if (exts.code === 200) {
        accept.value = exts.data;
    }
});
watch(fileList, (files) => {
    emit('file-list', files);
});
// 使用 defineExpose 将 open 方法暴露给父组件
defineExpose({ open });
</script>
<style scoped>
.el-upload__text {
    margin-top: 10px;
}
</style>